<template>
  <div id="benefit">
    <benefit-nav-bar />
    <div class="mask" v-if="isActive">
      <img src="~assets/img/profile/error.png" alt="" />
    </div>
    <div v-if="!isActive">
      <benefit-tab-control />
      <benefit-main :red-envelopes="redEnvelopes" />
      <router-view />
    </div>
  </div>
</template>

<script>
import BenefitNavBar from "./childComps/BenefitNavBar";
import BenefitTabControl from "./childComps/BenefitTabControl";
import BenefitMain from "./childComps/BenefitMain";

import { getHongBaos } from "network/benefit";
export default {
  data() {
    return {
      redEnvelopes: [],
      isActive: true,
    };
  },
  activated() {
    if (!localStorage.getItem("user_id")) {
      this.$toast.handleTipsText("请登录后重新进入");
      this.isActive = true;
    } else {
      this.isActive = false;
    }
  },
  created() {
    this.getHongBaos(localStorage.getItem("user_id"));
  },
  methods: {
    getHongBaos(user_id) {
      getHongBaos(user_id).then((res) => {
        this.redEnvelopes = res;
      });
    },
  },
  components: {
    BenefitNavBar,
    BenefitTabControl,
    BenefitMain,
  },
};
</script>
<style lang="less" scoped>
#benefit {
  position: relative;
  height: 100vh;
  background-color: #f5f5f5;
  z-index: 1;
  .mask {
    position: fixed;
    top: 44px;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    background-color: #fff;
    img {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 300px;
      transform: translate(-50%, -50%);
    }
  }
}
</style>